import {ICreateStageOptions} from "@rockyf/easy-design";

export default {
  el: '#container',
  editMode: true,
  theme: 'dark',
  designBounds: {x: 30, y: 30, w: 400, h: 350},
  nodes: [
    {
      id: 1,
      nodeType: 'group',
      label: 'root',
    },
    {
      id: 2,
      pid: 1,
      nodeType: 'label',
      label: 'label1',
      bounds: {x: 0, y: 0, w: 100, h: 25},
      props: {
        text: 'hello 😄!',
        textAlign: 'center',
      },
    },
    {
      id: 3,
      pid: 1,
      nodeType: 'image',
      label: 'image1',
      bounds: {x: 10, y: 50, w: 50, h: 50},
      props: {
        src: '/easy-design/imgs/1.png',
      },
    },
    {
      id: 4,
      pid: 1,
      nodeType: 'image',
      label: 'image2',
      bounds: {x: 100, y: 30, w: 100, h: 89},
      props: {
        src: '/easy-design/imgs/3.gif',
      },
    },
    {
      id: 5,
      pid: 1,
      nodeType: 'group',
      label: 'group1',
      bounds: {x: 140, y: 10, w: 150, h: 90},
    },
    {
      id: 6,
      pid: 5,
      nodeType: 'label',
      label: 'label2',
      bounds: {x: 0, y: 10, w: 100, h: 25},
      props: {
        text: 'aaaaaa',
        textAlign: 'center',
      },
    },
    {
      id: 7,
      pid: 5,
      nodeType: 'image',
      label: 'image3',
      bounds: {x: 0, y: 40, w: 80, h: 45},
      props: {
        src: '/easy-design/imgs/2.png',
      },
    },
    {
      id: 8,
      pid: 1,
      nodeType: 'chart',
      label: 'chart1',
      bounds: {x: 10, y: 150, w: 300, h: 180},
      props: {
        options: {
          backgroundColor: 'transparent',
          tooltip: {},
          grid: {
            left: '3%',
            right: '4%',
            top: '18%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛', '雪纺', '裤子', '高跟', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36,
                {
                  value: 50,
                  itemStyle: {
                    color: '#a90000'
                  }
                }, 10, 20]
            }
          ]
        },
      },
    },
  ],
} as ICreateStageOptions